<template>
  <my-nav-bar title="注册">
    <van-cell-group>
      <van-form @submit="onSubmit">
        <van-form @submit="onSubmit">
          <van-field v-model="userEmail"
                     name="userEmail"
                     label="邮箱地址"
                     placeholder="邮箱地址"
                     :rules="[{required: true, message: '请输入邮箱地址'}]"
          />
          <van-field v-model="userName"
                     name="userName"
                     label="用户名"
                     placeholder="用户名"
                     :rules="[{required: true, message: '请输入用户名'}]"
          />
          <van-field v-model="nickName"
                     name="nickName"
                     label="用户昵称"
                     placeholder="用户昵称"
                     :rules="[{required: true, message: '请输入用户昵称'}]"
          />
          <van-field v-model="passWord"
                     type="password"
                     name="passWord"
                     label="密码"
                     placeholder="密码"
                     :rules="[{ required: true, message: '请填写密码' }]"
          />
          <div class="submit_button">
            <van-button :disabled="isDisabled" round block type="info" native-type="submit" color="#7232DD">注册
            </van-button>
          </div>
        </van-form>
      </van-form>
    </van-cell-group>
  </my-nav-bar>
</template>

<script>
import MyNavBar from "@/components/MyNavBar";
import {register} from "@/api/user";
import {
  Field,
  CellGroup,
  Button,
  Form,
  Toast
} from "vant";

export default {
  name: "registered",
  components: {
    [Field.name]: Field,
    [CellGroup.name]: CellGroup,
    [Button.name]: Button,
    [Form.name]: Form,
    Toast,
    MyNavBar
  },
  data() {
    return {
      userEmail: "",
      userName: "",
      nickName: "",
      passWord: "",
      isDisabled: true,
    }
  },
  beforeUpdate() {
    if (this.userEmail !== "" && this.userName !== "" && this.passWord !== "") {
      this.isDisabled = false
    }
  },
  methods: {
    onSubmit(values) {
      const registerInfo = {
        nickName: this.nickName,
        username: this.userName,
        password: this.passWord,
        email: this.userEmail
      }
      register(registerInfo)
        .then(res => {
          setTimeout(() => {
            Toast.success("注册成功");
          }, 1000);
          this.$router.go(-1);
        })
        .catch(err => {
          console.log(err);
          setTimeout(() => {
            Toast.fail("注册失败," + err);
          }, 1000);

      })
    }
  }
}
</script>

<style scoped>
.submit_button {
  margin: 5px 16px;
}
</style>
